<template>
	<Container>
		<view class="header">
			<view
				hover-class="touch"
				hover-stay-time="300"
				:class="{ error: chooses[index] === 'error', articleLight: chooses[index] === 'select' }"
				@tap="tap(item, index)"
				v-for="(item, index) in assignment.optionArticles"
				:key="index"
			>
				<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			const status = this.chooses[index] === 'select' ? '' : 'select'
			this.optionStatus(status, index)
			const selectLens = this.chooses.filter((item, current) => {
				return item === 'select'
			}).length
			if (selectLens < 2) return
			const sucLens = this.chooses.filter((item, current) => {
				if (item === 'select') return this.assignment.optionArticles[current].isMatched
			}).length
			this.$parent.next({
				isSure: sucLens === 2
			})
			if (sucLens < 2) {
				this.chooses.map((item, index) => {
					if (item === 'select') this.optionStatus('error', index)
				})
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 5vh 0
	display flex
	position relative
	flex-wrap wrap
	view
		width 50%
		height 45%
		display flex
		align-items center
		justify-content center
		position relative
		.image
			width 85%
			height 80%
</style>
